<template>
  <div class="absolute z-[99999]" :style="position">
    <img :src="Eye" class="w-8 eye-icon" @click="openDialog" />
    <el-dialog
      v-model="visible"
      center
      draggable
      width="60%"
      :append-to-body="true"
      :lock-scroll="true"
      :modal-append-to-body="true"
      :show-close="true"
      class="!bg-black !text-white shadow-2xl"
    >
      <!-- <template #header>
        <span style="color: white; font-weight: bold">{{ title }}</span>
      </template> -->
      <HlsVideo :src="streamUrl" style="width: 100%; height: 60vh" class="bg-black" />
    </el-dialog>
  </div>
</template>

<script setup>
import Eye from '@/assets/imgs/eye.png'
import HlsVideo from '@/components/HlsVideo.vue'
import { ref } from 'vue'

const props = defineProps({
  title: {
    type: String,
  },
  position: {
    type: Object,
    default: () => ({
      left: '0px',
      top: '0px',
    }),
  },
  streamUrl: {
    type: String,
    default: '',
  },
})

const visible = defineModel()
const openDialog = () => {
  visible.value = true
}
</script>

<style lang="scss" scoped>
.eye-icon {
  cursor: pointer;
  transition:
    transform 0.2s ease,
    filter 0.2s ease;
}
.eye-icon:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(26, 201, 255, 0.8));
}
:deep(.el-dialog__header) {
  color: white !important;
}
</style>

<style>
.el-dialog {
  border: 1px solid #388adf;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(26, 201, 255, 0.5); /* 发光效果 */
}
.el-dialog__title {
  color: white !important;
}
.el-dialog__headerbtn .el-dialog__close {
  font-size: 24px !important;
  margin-right: 10px;
}
</style>
